<template>
  <div class="find-car page_pos_style" :style="{ top: `${phoneStatusBarHeight}`}">
    <!-- <router-view></router-view> -->
    <!-- <van-nav-bar title="按揭意向管理" fixed placeholder :border='false'>
      <template #left>
        <van-icon name="arrow-left" size="18" @click="goback()"/>
      </template>
      <template #right>
        <img
        src="../../assets/image/icon_search.png"
        @click="onClickRight()"
        v-show="isActive"
        >
      </template>
    </van-nav-bar> -->
    
    <navbar :title="title"></navbar>
    <!-- 点击搜索按钮出现搜索框,并隐藏搜索按钮 -->
    <div class="page_pos_scroll" :style="{ top: `${phoneStatusBarHeight}`,marginTop:'12vw'}">
      <div class="scroll-box">
        <div class="search-box">
          <form action="/">
            <van-search
              v-model="value"
              shape="round"
              placeholder="搜索"
              @cancel="onCancel"
              @search="onSearch"
            />
          </form>
          <!--
              v-show='isCancel'
              show-action -->
        </div>
        <!-- 滚动刷新 -->
        <!-- <van-pull-refresh v-model="refreshing" @refresh="onRefresh"> -->
        <div class="mortagae-item-box" >
        <div class="mortgage_dlist" v-for='item in userOrder'
              :key='item.orderId' @click="goDetail(item)"
              >
          <find-car-item :orderMsg='item'>
            <div class="position">
              <van-icon name="location-o" />
              {{item.buyCarCity}}
            </div>
          </find-car-item>
        </div>

          <div class="get-more" v-if="getMoreData" @click="getData(1)">点击加载更多</div>
          <div class="get-more" v-else>没有更多了</div>
        </div>
      </div>
    </div>


    <!-- </van-pull-refresh> -->

  </div>
</template>

<script>
  import findCarItem from '../../components/common/findcaritem.vue'
  import { mortgageList, getUserIdData } from './api'
  export default{
    components: {
      findCarItem,
    },
    data() {
      return {
        // header栏 => 标题
        title:"按揭意向管理",
        userOrder: [],
        query:{
          page:1,
          limit:10,
          order:'desc',
          sidx: 'update_time',
          carModels: '',
          contactWay: ''
        },
        list: [],
        refreshing: false,
        value: '',
        isActive: true,
        isCancel: false,
        getMoreData: true,
        finsh: false,
        // 获取屏幕状态栏高度
        phoneStatusBarHeight:''
      }
    },
    methods: {
      goback() {
        this.$router.go(-1)
      },
      onSearch() {
        this.query.contactWay = this.value
        this.query.carModels = this.value
        this.userOrder = null
        this.userOrder = []
        this.getData()
      },
      onCancel() {
        this.isCancel = false
        this.isActive = true
      },
      onClickRight() {
        this.isActive = false
        this.isCancel = true
      },
      goDetail(item) {
		  // this.$router.push({
			 //  name:'MortageDetails',
			 //  query:{
				//   id:item.id
			 //  }
		  // })
        console.log(item)
      },

      //下拉刷新
      onRefresh() {
        this.getMoreData = false
        setTimeout(() => {
          this.$toast.success({
            position: 'top',
            message: '刷新成功',
            duration: 1000
          });
          this.refreshing = false;
        }, 1000);
        this.getData()
      },

      getData(isPage) {
        if(isPage){
          this.query.page = this.query.page+1
        }
        // setTimeout(() => {
        //   this.getMoreData = true
        // }, 1000);
        let data = [
          // {
          //   orderId: '1222',
          //   title: '奥迪A6L新能源 2020款 55 TF',
          //   img: require('../../assets/image/4.png'),
          //   name: '刘余旭',
          //   phone: '13467890123',
          //   time: '2021/08/09 12:11:10',
          //   orderMessage: "待支付",
          //   orderNumber: 2,
          //   position: '广州'
          // },

        ]
        let {limit,page,order,sidx,contactWay,carModels} = this.query
        mortgageList({limit,page,order,sidx,contactWay,carModels}).then(({data})=>{
          data.list.map(item=>{
            item.carModels =  item.vtdName,
            item.userName = item.createPeople
          })
          let isMore = data.totalPage > data.currPage

          if(isMore){
            this.query.page = data.currPage
          }
          this.userOrder = [...this.userOrder,...data.list]
          this.getMoreData = isMore
          console.log(isMore)
        })
        // this.userOrder = data
        // console.log('现在有',data.length,'条')
        /*
          1. 第一次加载完后展示20条
          2. 每次点击，加载20条
         */

      },
      // 获取路由链接上拼接的token值
      getTokenInUrl() {
        var url = window.location.href;
        if (url.indexOf("token") > 0) {
          let getTokenParams = window.location.href.split("token=")[1];
          getTokenParams=getTokenParams.split("&")[0];
          if (getTokenParams.length >= 32) {
            getTokenParams = getTokenParams.substr(0, 32);
            console.log('%c [ getTokenParams ]', 'font-size:13px; background:pink; color:#bf2c9f;', getTokenParams)
            sessionStorage.setItem("token", getTokenParams);
          }
        }
      },
    },
    created() {
      // 获取屏幕状态栏高度
      this.phoneStatusBarHeight = window.phoneStatusBarHeight
      // 修改页面标题
      document.title = "按揭意向管理"
      // 获取路由链接上拼接的token值
      this.getTokenInUrl()
      // 获取数据
      this.getData()
      // this.getData()
    },
    mounted() {
      document.querySelector('body').setAttribute('style', 'background-color:white')
    }
}
</script>

<style scoped lang="less">
  .scroll-box{
    overflow-y: auto;
  }
  .mortagae-item-box{
    // height: calc(~'100vh - 84px');
    // background-color: pink;
  }
  .get-more{
    text-align: center;
    color: #999999;
    margin-top: .6rem 0;
	padding: 1rem 0;
    font-size: 12px;
    letter-spacing: 1px;
  }
  .find-car-item {
    // margin-top: 8px ;
    margin: 0 16px;
    border-bottom: 0.5px solid #EEEEEE;
    .position{
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
      .van-icon{
        color: #F6C401;
      }
    }
  }
</style>
<style lang="less">
  .van-search__action{
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
  }
  .van-nav-bar .van-icon {
    color: #000000 ;
  }
  .van-nav-bar__title {
    font-size: 17px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #000000;
  }
</style>
